<template>
  <el-drawer title="我嵌套了表格!" :visible.sync="visible" direction="rtl" size="50%">
    <el-collapse v-model="active">
      <el-collapse-item v-for="(item,index) in listData" :key="index" :name="index">
        <template slot="title">
          <span>{{ '事件'+ (index + 1) }}</span>
        </template>
        <el-form :model="form" label-width="100px">
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="事件发生时间:">
                <span>{{ item.eventDate }}</span>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="事件描述:">
                <span>{{ item.eventDescribe ? item.eventDescribe : '无事件描述' }}</span>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="奖惩形式:">
                <el-radio-group v-model="item.rewardOrientation">
                  <el-radio :label="1" :disabled="true">加分</el-radio>
                  <el-radio :label="2" :disabled="true">减分</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="奖惩值:">
                <span>{{ item.rewardValue }}</span>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="创建人:">{{ item.createUser }}</el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="照片数量">
                <template
                  v-if="item.savePath && item.savePath.length > 0"
                >{{ item.savePath.length }}</template>
                <template v-else>无照片</template>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="责任追加:">
                <template
                  v-if="item.evalEventExtradutyList && item.evalEventExtradutyList.length > 0"
                >
                  <e-table
                    ref="eTable"
                    :tableData="tableData"
                    :columns="columns"
                    :loading="loading"
                    :pageObj="null"
                    :total="total"
                  >
                    <el-table-column slot="type" label="奖惩形式" width="100" align="center">
                      <template slot-scope="scope">{{ scope.row.rewardType === 1 ? '按分' : '按钱' }}</template>
                    </el-table-column>
                    <el-table-column slot="targetMode" label="责任对象" align="center">
                      <template slot-scope="scope">{{ scope.row.targetMode === 1 ? '科室' : '个人' }}</template>
                    </el-table-column>
                  </e-table>
                </template>
                <span v-else>否</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      active: ['1'],
      form: {},
      listData: [],
      loading: false,
      // 表头
      columns: [
        {
          slot: 'type'
        },
        {
          label: '奖惩值',
          prop: 'rewardValue'
        },
        { slot: 'targetMode' },
        {
          label: '对象名称',
          prop: 'targetName'
        }
      ],
      tableData: [],
      total: 1,
      visible: false
    }
  },
  methods: {
    show(arr) {
      this.visible = true
      this.tableData = arr
      arr.map(v => {
        if (v.evalEventExtradutyList && v.evalEventExtradutyList.length > 0) {
          v.evalEventExtradutyList.map(j => {
            j.rewardType = v.rewardType
          })
        }
      })
      this.listData = arr
    }
  }
}
</script>

<style>
</style>